<template>
  <div id="infor">
    <nav-header></nav-header>
    <div class="infor-content">
      <sidebar
        :tags="tags"
        @conIndex="getIndex($event)"
        ref="father"
        :defaultIndex="defaultIndex"
      ></sidebar>

      <div class="infor-right" v-show="ctnIndex == 0">
        <div class="account">草稿箱</div>
        <div class="infor">
          <div class="infor-title">全部草稿</div>
          <div v-if="res.articleShow">
            <div
              class="article"
              v-for="(item, index) in artList"
              :key="index"
              v-loading="loading"
            >
              <div class="article-top">
                <div class="article-header" @click="goUp(item.articleUserid)">
                  <img :src="item.headImage" alt />
                </div>
                <div class="article-right">
                  <div class="article-name">
                    <span>{{ item.nickName }}</span>
                    <div class="stars" v-if="item.award">
                      <div
                        class="singleStar"
                        v-for="itemStar in item.stars"
                        :key="itemStar"
                      >
                        <img src="../assets/imgs/hb.png" alt />
                      </div>
                    </div>
                  </div>
                  <div class="article-date">{{ item.updateTime }}</div>
                </div>
              </div>
              <div class="small-content">
                <div
                  class="content-top"
                  @click="jumpPage('artDetail', item.articleId)"
                >
                  <div class="article-title" v-if="item.articleTitle != null">{{ item.articleTitle }}</div>
                  <div class="article-content" v-if="item.articleContent != null">{{ item.articleContent }}</div>
                </div>
              <viewer class="article-pic" v-if="item.show" :images="item.pic">
                <img
                  class="single-pic"
                  v-for="itemSon in item.pic"
                  :key="itemSon.index"
                  :src="itemSon"
                />
              </viewer>
                <div class="article-btn">
                  <!-- <div class="btn-single">发布</div> -->
                  <div
                    class="btn-single delete"
                    @click="deleteAirticle(item.articleId)"
                  >
                    删除
                  </div>
                  <div
                    class="btn-single editor"
                    @click="submit(item.articleId)"
                  >
                    编辑
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="article noList" v-else>当前还没有内容哦~</div>
        </div>
      </div>
    </div>
    <div class="paging" v-if="res.articleShow">
      <el-pagination
        layout="prev, pager, next"
        :total="count"
        :page-size="20"
        :background="true"
        :pager-count="7"
        @current-change="changePage"
      ></el-pagination>
    </div>
    <nav-footer ref="child"> </nav-footer>
  </div>
</template>

<script>
import Sidebar from "../components/Sidebar";
import NavHeader from "../components/Header";
import NavFooter from "../components/Footer";
import { provinceAndCityData, CodeToText } from "element-china-area-data";
export default {
  data() {
    return {
      tags: [{ name: "文章草稿" }],
      list: [],
      defaultIndex: 0,
      ctnIndex: 0,
      options: provinceAndCityData,
      selectedOptions: [],
      value1: "",
      artList: [{}, {}],
      res: "",
      count: 0,
    };
  },
  components: {
    Sidebar,
    NavHeader,
    NavFooter,
  },
  created() {
    this.init(`/laiwen/article/frontend/drafts`, "list", 1);
  },
  methods: {
    init(url, listName, page) {
      this.$fetch(`${url}?page=${page}&limit=20`, {}).then((res) => {
        this.loading = false;
        this.totalPage = res.totalPages * 1;
        this.count = res.count;
        this.res = res;
        this.$set(res, "articleShow", true);
        this.artList = res[listName];
        //处理图片为空的样式
        for (let i of this.artList.keys()) {
          this.$set(this.artList[i], "show", true);
          if (this.artList[i].articlePicture == "") {
            this.$set(this.artList[i], "show", false);
          }
          //处理图片数组
          let picArray = [];
          picArray = this.artList[i].articlePicture.split(",").filter((e) => e);
          this.$set(this.artList[i], "pic", picArray);
          //处理星星数组
          let len = this.artList[i].award+1;
          if (len != null) {
            let stars = [];
            stars.length = len;
            this.$set(this.artList[i], "stars", stars);
          }
          //处理收藏模态窗
          this.$set(this.artList[i], "showCollect", false);
        }
        //list为空的样式处理
        if (this.artList.length == 0) {
          this.$set(res, "articleShow", false);
        }
        console.log(this.artList);
      });
    },
    handleChange(value) {
      console.log(CodeToText[value[0]]);
      console.log(CodeToText[value[1]]);
    },
    //接受子组件index
    getIndex(e) {
      this.ctnIndex = e;
    },
    changeDate(val) {
      console.log(this.value1);
    },
    //分页方法
    changePage(size) {
      console.log(size);
      this.currentPage = size;
      this.init(`/laiwen/article/frontend/drafts`, "list", this.currentPage);
    },
    //文章删除
    deleteAirticle(id) {
      let that = this;
      that
        .$confirm("此操作将永久删除该草稿, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
        .then(() => {
          that
            .$post(`/laiwen/article/frontend/delete?articleId=${id}`, {})
            .then((res) => {
              //重置列表
              that.init(`/laiwen/article/frontend/drafts`, "list", 1);
            });
          that.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          that.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //重发操作
    submit(e) {
      let id = e;
      let that = this;
      that.$router.push({
         path: "/editor",
        // path: "/",
        query: { id: e },
      });
    },
  },
  mounted() {
    this.getRem(1920, 100);
  },
};
</script>

<style scoped src="../assets/css/drafts.css"></style>
